<template>
  <div class="main">
    <div class="logo">
      <img src="../../../static/index/banner.jpg" alt="">
    </div>
    <div class="word">
      <p class="permisson">申请获取以下权限</p>
      <p class="text">获得你的公开信息(昵称，头像等)</p>
    </div>
    <!-- 需要使用 button 来授权登录 -->
    <button open-type="getUserInfo" @getuserinfo="bindGetUserInfo">授权登录</button>
  </div>
</template>
<script>
export default {
    mounted() {
        this.getSetting()
    },
    methods: {
        bindGetUserInfo: function(e) {
            this.getSetting()
        },
        getSetting() {
            var _this = this
            wx.getSetting({
                success: function(e) {
                    if (e.authSetting['scope.userInfo']) {
                        console.log('已经授权过了')
                        wx.login({
                            success: function(res) {
                                var code = res.code
                                // var code = '071D9qaS01G9482PMgaS0NFpaS0D9qa6'
                                _this.$http
                                    .get('/customer/wx/loginCode', {
                                        code: code
                                    })
                                    .then(res => {
                                        wx.setStorageSync(
                                            'headerUserToken',
                                            res.data
                                        )
                                        wx.switchTab({
                                            url: '../index/main' //获取用户授权，跳转到首页
                                        })
                                    })
                            }
                        })
                    }
                }
            })
        }
    }
}
</script>
<style lang='scss' scoped>
.main {
    padding: 60rpx 18rpx;
}
.logo {
    padding-bottom: 30rpx;
    border-bottom: 1px solid #666;
    img {
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
        display: block;
        margin: 0 auto;
    }
}
.word {
    .permisson {
        margin-top: 40rpx;
    }
    .text {
        display: block;
        color: #9d9d9d;
        margin-top: 20rpx;
        font-size: 12px;
        margin-bottom: 40rpx;
    }
}
</style>
